<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Cool Student List</title>
    <style>
        /* 基本样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        /* 导航栏样式 */
        .navbar {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }

        /* 页面标题样式 */
        h2 {
            font-size: 28px;
            text-align: center;
            color: #333;
            margin-top: 20px;
        }

        /* 表格样式 */
        table {
            border-collapse: collapse;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
        }

        th, td {
            padding: 12px;
            text-align: center;
        }

        th {
            background-color: #333;
            color: #fff;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        /* 操作链接样式 */
        .action-links a {
            color: #007bff;
            text-decoration: none;
            margin-right: 10px;
        }

        .action-links a:hover {
            text-decoration: underline;
        }

        /* 动画效果 */
        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .spin {
            animation: rotate 2s linear infinite;
        }

        /* 更多复杂的动画效果 */
        @keyframes slideIn {
            0% {
                transform: translateY(-100px);
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* 应用动画到表格 */
        .animated-table {
            animation: slideIn 1s ease-in-out;
        }
        
        .add-link {
            display: block;
            text-align: center;
            margin-top: 20px;
        }

        .add-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #0084ff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .add-button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="navbar">
    <a>学生管理</a>
    </div>
    <a class="add-link" th:href="@{/manong/addStudent}">
        <button class="add-button">添加学生</button>
    </a>
    <h2 th:text="用户列表"></h2>
    <!-- 添加动画效果到表格 -->
    <table border="1" class="animated-table">
        <tr>
            <th th:text="学号"></th>
            <th th:text="姓名"></th>
            <th th:text="性别"></th>
            <th th:text="密码"></th>
            <th th:text="身份证号"></th>
            <th th:text="所属学院"></th>
            <th th:text="专业"></th>
            <th th:text="班级"></th>
            <th th:text="年级"></th>
            <th th:text="籍贯"></th>
            <th th:text="电话号码"></th>
            <th th:text="密保"></th>
      
  	</tr>
		    <tr th:each="u:${studentList}">
            <td th:text="${u.sno}"></td>
            <td th:text="${u.name}"></td>
            <td th:text="${u.sex}"></td>
            <td th:text="${u.password}"></td>
            <td th:text="${u.id}"></td>
            <td th:text="${u.college}"></td>
            <td th:text="${u.speciality}"></td>
            <td th:text="${u.clase}"></td>
            <td th:text="${u.year}"></td>
            <td th:text="${u.nativePlace}"></td>
            <td th:text="${u.phone}"></td>
            <td th:text="${u.confident}"></td>
            <td class="action-links">
                <a th:href="@{/manong/updateStudent(sno=${u.sno})}">修改</a>
                <a th:href="@{/manong/deleteStudent(sno=${u.sno})}" onclick="return confirm('确定要删除吗')">删除</a>
            </td>
        </tr>
    </table>
</body>
</html>




